<template>
  <div>
    <el-checkbox-group v-model="selectedColumns">
      <el-checkbox v-for="column in columns" :key="column.prop" :label="column.prop">
        {{ column.label }}
      </el-checkbox>
    </el-checkbox-group>

    <el-table :data="tableData">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :visible="selectedColumns.includes(column.prop)"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { ElCheckbox, ElCheckboxGroup, ElTable, ElTableColumn } from 'element-plus';

export default defineComponent({
  name: 'YourComponent',
  components: {
    ElCheckbox,
    ElCheckboxGroup,
    ElTable,
    ElTableColumn,
  },
  setup() {
    const tableData = ref([
      { name: '张三', age: 20, gender: '男' },
      { name: '李四', age: 25, gender: '女' },
      { name: '王五', age: 30, gender: '男' },
    ]);

    const columns = ref([
      { prop: 'name', label: '姓名' },
      { prop: 'age', label: '年龄' },
      { prop: 'gender', label: '性别' },
    ]);

    const selectedColumns = ref([]);

    return {
      tableData,
      columns,
      selectedColumns,
    };
  },
});
</script>
